<template>
	<view class="bg-white flex flex-direction" style="width: 100vw;height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text>学习记录</text>
			</block>
		</cu-custom>
		<!-- 课程，文章作品展示 -->
		<view class="flex align-center justify-around" style="padding: 32rpx 0;font-size: 32rpx;">
			<view v-for="(item,index) in tablist" :key="index"
				:style="{'color': currentIndex==index?'#007AFF':'#333333'}" @click="change(index)">{{item.columnName}}</view>
		</view>
		<swiper @change="onSwiperchange" :current="currentIndex"
			style="padding: 0 32rpx;touch-action: none;height: 80vh;">
			<swiper-item v-for="(item,index) in tablist" :key="index" style="width: 100%; ">
				<scroll-view scroll-y style="width: 100%;height: 100%;">
					<view v-if="curlist && isShow" v-for="(content,index2) in curlist" :key="index2" style="margin-top: 48rpx;">
						<articleCell v-if="tablist[currentIndex].columnValue=='article'" :art="content"></articleCell>
						<courseCell v-if="tablist[currentIndex].columnValue=='course' && courseMap[content.contentId] && content.contentSubject==courseMap[content.contentId].contentSubject" :course="courseMap[content.contentId]"></courseCell>
						<bookCell v-if="tablist[currentIndex].columnValue=='book' && content.contentSubject=='audio'" :book="bookMap[content.contentId]"></bookCell>
					</view>
					<view v-if="!curlist || curlist.length<1" class="flex justify-center" style="margin-top: 40rpx; font-size: 40rpx;">
						还没有学习过{{tablist[currentIndex].columnName}}呢
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	import articleCell from '../../components/mine/learn-record/article-cell.vue';
	import courseCell from '../../components/mine/learn-record/course-cell.vue';
	import bookCell from '../../components/mine/learn-record/book-cell.vue';
	export default {
		components: {
			articleCell, courseCell, bookCell
		},
		data() {
			return {
				isShow: false,
				tablist: ['课程', '文章'],
				currentIndex: this.$Route.query.currentIndex ? this.$Route.query.currentIndex:0,
				curlist: [],
				bookMap: {},
				courseMap: {},
				userId: this.$store.getters.userid,
				// constantID: "0000000000000000000",
				// targetComment: {},
				// currentContent: {}
			}
		},
		onShow() {
			this.$http.get("/edu/column-type/getAllColumnType").then(res=>{
				let data = res.data;
				if(data.success){
					// console.log(data.result)
					this.tablist = [];
					//去掉 journal专栏
					data.result.forEach((item) => {
						if(item.columnValue && item.columnValue != "journal_subject") {
							this.tablist.push(item);
						}
					})
					this.getColumnData();
				}
			})
		},
		methods: {
			change(index) {
				this.currentIndex = index;
			},
			onSwiperchange(e) {
				this.currentIndex = e.detail.current;
				this.getColumnData();
			},
			getColumnData(){
				this.isShow = false;
				this.$http.post('/edu/learn-record/getLearnRecord', {
					userId: this.userId,
					columnType: this.tablist[this.currentIndex].id
				}).then((res) => {
					this.curlist = res.data.result;
					// console.log("curlist", this.curlist)
					if(this.tablist[this.currentIndex].columnValue=='article'){
						this.curlist.forEach((item) => {
							item["imglist"] = item.cover.split(",")
							delete item.cover
						})						
					} else if(this.tablist[this.currentIndex].columnValue=='course') {
						this.curlist.forEach((item) => {
							const courseId = item.contentId;
							//同一个课程下有多个章节, 取最近看过的章节
							if(!this.courseMap[courseId]) {	//后端按时间降序排列, 第一个遍历到的章节即为最近的
								this.courseMap[courseId] = item;
								// this.courseMap[courseId].contentSubject = item.contentSubject;
							}
						})	
						// console.log("courseMap", this.courseMap);
					} else if(this.tablist[this.currentIndex].columnValue=='book') {
						this.curlist.forEach((item) => {
							const bookId = item.contentId;
							if(!this.bookMap[bookId]) {
								this.bookMap[bookId] = item;
							}
							if(item.contentSubject == "audio") {
								this.bookMap[bookId].totalTimeAudio = this.isRealNum(item.totalTime) ? item.totalTime : null;
								this.bookMap[bookId].learnedTimeAudio = this.isRealNum(item.learnedTime) ? item.learnedTime : 0.0;
							} else {
								this.bookMap[bookId].totalTimeVideo = this.isRealNum(item.totalTime) ? item.totalTime : null;
								this.bookMap[bookId].learnedTimeVideo = this.isRealNum(item.learnedTime) ? item.learnedTime : 0.0;
								
							}
						})
						// console.log("bookMap", this.bookMap);
					}
				}).finally(() => {
					this.isShow = true;
				})
			},
			isRealNum(val){
			    // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
			    if(val === "" || val ==null){
			        return false;
			    }
			    if(!isNaN(val)){
			        return true;
			    }else{
			        return false;
			    }
			}
		}
	}
</script>

<style>
</style>
